import {useState,useEffect} from 'react'
// import {useLocation,useNavigate,Outlet} from 'react-router-dom'
import axios from 'axios'
import '../css/studio.css'

import {  List, Skeleton , Divider,Flex} from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';



interface DataType {
    id: number;
    names: string;
    sex: string;
    age: number;
    num: string;
    time: string;
    restate: boolean;
    tag: string[];
    state: number;
    // gender: string;
    // name: {
    //   title: string;
    //   first: string;
    //   last: string;
    // };
    // email: string;
    // picture: {
    //   large: string;
    //   medium: string;
    //   thumbnail: string;
    // };
    // nat: string;
  }



export default function Infinlist(){


    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<DataType[]>([
      {
        'id':0,"names":"张晓晓","sex":"女","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','复诊'],"state":0
    },
    {
        'id':1,"names":"王一","sex":"男","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":0
    },
    {
        'id':2,"names":"李梅","sex":"女","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":0
    },
    {
        'id':3,"names":"张晓珂","sex":"男","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":0
    },
    {
        'id':4,"names":"刘克","sex":"男","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','复诊'],"state":0
    },
    {
        'id':5,"names":"赵明","sex":"男","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":1
    },
    {
        'id':6,"names":"孙桐","sex":"女","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":1
    },
    {
        'id':7,"names":"周洋","sex":"女","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":1
    },
    {
        'id':8,"names":"李雷","sex":"男","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":2
    },
    {
        'id':9,"names":"刘明","sex":"男","age":20,"num":'20250212',
        "time":'2025-2-12',"restate":false,"tag":['医保','初诊'],"state":2
    },
    ]);
    
    const loadMoreData = () => {
        if (loading) {
          return;
        }
        setLoading(true);
        fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
          .then((res) => res.json())
          .then((body) => {
            setData([...data, ...body.results]);
            setLoading(false);
          })
          .catch(() => {
            setLoading(false);
          });
      };


    useEffect(()=>{
        loadMoreData()
    },[])

    return (
        <>
                <InfiniteScroll
                    dataLength={data.length}
                    next={loadMoreData}
                    hasMore={data.length < 50}
                    loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
                    endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
                    scrollableTarget= "scrollableDiv"
                >
                    {/* <List
                        dataSource={data}
                        renderItem={(item,index:any) => (
                            <List.Item key={item.index}  >
                              <List.Item.Meta
                                  title={<a href="https://ant.design">{item.name.last}</a>}
                                  description={item.email}
                              />
                            </List.Item>
                        )}
                    /> */}
                    <List
                        dataSource={data}
                        renderItem={(item,index:any) => (
                            <List.Item key={index}  >
                              <List.Item.Meta
                                  title={<span>{item.names} {item.sex} {item.age}</span>}
                                  description={<span>{item.time}<span></span></span>}
                              />
                            </List.Item>
                        )}
                    />

                </InfiniteScroll>
        </>
    )
}